<template>
	<div class="page1-centet">
		<div class="echart-show" ref="chart"></div>
	</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	name: "pcPage1Centet",
	props: { companiesData: { type: Array, required: true, default: () => [] } },
	data() { return { chart: null, iconMapPath: require('../../images/icon-map.png'), jilinMapData: { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "name": "吉林省", "adcode": "220000" }, "geometry": { "type": "Polygon", "coordinates": [[[0,0],[1256,0],[1256,617],[0,617],[0,0]]] } }] } }; },
	mounted() {},
	beforeDestroy() { if (this.chart) { this.chart.dispose(); } },
	methods: {
		initChart() { this.$nextTick(() => { this.buildChart(); }); },
		buildChart() {
			echarts.registerMap('jilin', this.jilinMapData);
			this.chart = echarts.init(this.$refs.chart);
			const lines = this.generateLines();
			const option = { backgroundColor: 'rgba(0, 0, 0, 0)', geo: { map: 'jilin', roam: false, aspectScale: 1, layoutCenter: ['50%', '50%'], layoutSize: '178%', silent: true, itemStyle: { normal: { areaColor: 'rgba(0, 100, 200, 0)', borderColor: '#00ffffff', borderWidth: 0, shadowColor: '#00ffffff' } } }, series: [ { type: 'effectScatter', coordinateSystem: 'geo', data: this.companiesData.map(item => ({ name: item.name, value: item.coord.concat([item.isCenter ? 100 : 100]) })), symbolSize: function(val, params) { return params.data.value[2] / 3; }, itemStyle: { color: function(params) { return 'rgba(0, 255, 255, 0)'; } }, hoverAnimation: false, silent: true }, { type: 'effectScatter', coordinateSystem: 'geo', data: this.companiesData.map(item => ({ name: item.name, value: item.coord.concat([item.isCenter ? 100 : 60]), symbolSize: item.isCenter ? 50 : 42, itemStyle: { color: '#00ffff', borderColor: '#44ffff', borderWidth: 2, shadowColor: '#00ffff', shadowBlur: 20 }, companyData: item })), symbol: 'image://' + this.iconMapPath, symbolSize: function(val, params) { return params.data.value[2] > 80 ? 22 : 16; }, itemStyle: { color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [ {offset:0, color: '#66ffff'}, {offset:0.7, color: '#00ffff'}, {offset:1, color: '#0099cc'} ]), borderColor: '#44ffff', borderWidth: 3, shadowColor: '#00ffff', shadowBlur: 22 }, rippleEffect: { brushType: 'stroke', scale: 2.3, period: 4 }, label: { show: true, position: 'right', offset: [10, 0], formatter: function(params) { return params.name.split('').join('\n'); }, color: '#ffffff', fontSize: 12, fontWeight: 'bold', backgroundColor: 'rgba(0, 30, 60, 0.8)', borderColor: '#00ffff', borderWidth: 1, borderRadius: 4, padding: [5, 5], shadowColor: '#00ffff', shadowBlur: 8, lineHeight: 14 }, emphasis: { scale: 1.3, itemStyle: { shadowBlur: 30 } } }, { type: 'lines', coordinateSystem: 'geo', data: lines, large: false, silent: true, effect: { show: true, constantSpeed: 40, symbol: 'circle', symbolSize: 10, trailLength: 0.6, color: '#ffffff', shadowColor: '#00ffff', shadowBlur: 8 }, lineStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ {offset: 0, color: 'rgba(255, 255, 255, 0)'}, {offset: 0.3, color: 'rgba(0, 255, 255, 0.8)'}, {offset: 0.7, color: 'rgba(255, 255, 255, 0.9)'}, {offset: 1, color: 'rgba(0, 255, 255, 0)'} ]), width: 2.5, curveness: 0.3, shadowColor: '#00ffff', shadowBlur: 6 } } ] };
			this.chart.setOption(option);
			window.addEventListener('resize', () => { this.chart && this.chart.resize(); });
		},
		generateLines() { const center = this.companiesData.find(item => item.isCenter); const others = this.companiesData.filter(item => !item.isCenter); return others.map(company => ({ coords: [center.coord, company.coord] })); }
	}
};
</script>

<style lang="scss" scoped>
.page1-centet { width: 100%; height: 617px; position: relative; overflow: hidden; }
.page1-centet::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('../../images/mapFinished.svg') no-repeat center center; background-size: contain; filter: drop-shadow(0 0 18px rgba(0, 255, 255, 0.6)); z-index: 1; }
.echart-show { width: 100%; height: 100%; position: relative; z-index: 2; }
</style>
